<template>
  <v-container fluid style="min-height: 0;padding:12px;" grid-list-lg>
    <v-layout row wrap>
      <v-flex xs12 sm6 md3>
        <v-card color="blue-grey darken-2" class="white--text">
          <v-container fluid grid-list-lg>
            <v-layout row>
              <v-flex xs8>
                <div>
                  <div class="headline">生产环境</div>
                  <div>共有({{hostsNum.prd}})台服务器</div>
                  <div>已使用：物理机({{hostsNum.prdwlj}})+虚拟机({{hostsNum.prdxnj}})</div>
                </div>
              </v-flex>
              <v-flex xs4>
                <v-icon style="font-size:96px;color:#fff;">keyboard</v-icon>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
      <v-flex xs12 sm6 md3>
        <v-card color="cyan darken-2" class="white--text">
          <v-container fluid grid-list-lg>
            <v-layout row>
              <v-flex xs8>
                <div>
                  <div class="headline">预产环境</div>
                  <div>共有({{hostsNum.pre}})台服务器</div>
                  <div>已使用：物理机({{hostsNum.prewlj}})+虚拟机({{hostsNum.prexnj}})</div>
                </div>
              </v-flex>
              <v-flex xs4>
                <v-icon style="font-size:96px;color:#fff;">router</v-icon>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
      <v-flex xs12 sm6 md3>
        <v-card color="purple" class="white--text">
          <v-container fluid grid-list-lg>
            <v-layout row>
              <v-flex xs8>
                <div>
                  <div class="headline">测试环境</div>
                  <div>共有({{hostsNum.sit}})台服务器</div>
                  <div>已使用：物理机({{hostsNum.sitwlj}})+虚拟机({{hostsNum.sitxnj}})</div>
                </div>
              </v-flex>
              <v-flex xs4>
                <v-icon style="font-size:96px;color:#fff;">tune</v-icon>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
      <v-flex xs12 sm6 md3>
        <v-card color="lime darken-2" class="white--text">
          <v-container fluid grid-list-lg>
            <v-layout row>
              <v-flex xs8>
                <div>
                  <div class="headline">开发环境</div>
                  <div>共有({{hostsNum.dev}})台服务器</div>
                  <div>已使用：物理机({{hostsNum.devwlj}})+虚拟机({{hostsNum.devxnj}})</div>
                </div>
              </v-flex>
              <v-flex xs4>
                <v-icon style="font-size:96px;color:#fff;">airplay</v-icon>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
    <v-layout row wrap>
      <v-flex xs12 sm6 md6>
      <v-card>
        <v-toolbar color="cyan" dark height="45">
          <v-toolbar-title>中间件状态</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <v-list>
          <template v-for="(item, index) in middleWareStatus">
            <v-list-tile  :key="item.title">
              <v-list-tile-avatar>
                <v-icon :color="item.color">{{item.avatar}}</v-icon>
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title v-html="item.title"  class="text-lg-right"></v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-divider v-if="index < middleWareStatus.length-1" :key="index"></v-divider>
          </template>
        </v-list>
      </v-card>
    </v-flex>
    <v-flex xs12 sm6 md6>
      <mqSvg></mqSvg>
    </v-flex>
    <v-flex xs12 sm6 md6>
      <sysChart></sysChart>
    </v-flex>
    <v-flex xs12 sm6 md6>
      <pubSvg></pubSvg>
    </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('dashboard')
export default {
  name: 'dashboard',
  data: function () {
    return this.$store.state.dashboard
  },
  methods: {
    ...mapActions({
      loadHostsNum: 'loadHostsNum',
      loadMiddleStatus: 'loadMiddleStatus'
    })
  },
  mounted () {
    this.loadHostsNum()
    this.loadMiddleStatus()
  },
  components: {
    mqSvg: () => import('./mqSvg'),
    pubSvg: () => import('./pubSvg'),
    sysChart: () => import('./sysChart')
  }
}
</script>
